<template>
  <router-view v-slot="{ Component }">
    <transition mode="out-in" name="fade">
      <keep-alive include="home">
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
  <Tabbar v-show="!route.meta.hideTabBar" />
</template>

<script setup>
import Tabbar from './components/tabbar/Tabbar.vue';
import { useRoute } from 'vue-router';
const route = useRoute();
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
